
<template>
  <div>
    <h1>{{title}}</h1>
    <div id="content">
      <p v-html="content"></p>
    </div>
    <div v-if="this.$store.state.user.type == '1'" id="write">
      <el-button @click="write" type="primary" icon="el-icon-edit" circle></el-button>
    </div>
  </div>
</template>
<script>
import { get } from "@/api/task";
export default {
  data() {
    return {
      title: null,
      content: null
    };
  },
  mounted() {
    this.getContent();
  },
  methods: {
    async getContent() {
      const data = await get(this.$route.query.id);
      const res = data.data.data.data;
      console.log(res);
      this.title = res.title;
      this.content = res.content;
    },
    write(){
      this.$router.push({
        path:"task_write",
        query:{
          taskId:this.$route.query.id,
          title:this.title,
        }
      })
    }
  },

};
</script>
<style scoped>
h1 {
  font-size: 2em !important;
}
#editor {
  margin-top: 2em;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

#content {
  min-height: 500px;
  max-height: 800px;
  overflow: scroll;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 100px;
  margin-bottom: 50px;
}
#write{
  display: flex;
  justify-content:flex-end;
}
</style>
